import { Button, Drawer, Form, Input, Select, Space } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { useToggle } from 'react-use';
import ContentWrapper from '../../../component/contentWrapper';
import PageTable from '../../../component/pageTable/pageTable';
import IPageInterface from '../../../interface/pageInterface';
import './index.less'

interface ICompanyManageProps {

}

const CompanyManage: React.FC<ICompanyManageProps> = (props) => {
    const [visible, setVisible] = useToggle(false);
    return (
        <ContentWrapper gap={16} >
            <Space>
                <span>公司名称：</span>
                <Input placeholder="输入公司名称" />
                <Button type="primary" >搜索</Button>
                <Button onClick={setVisible} >添加公司</Button>
            </Space>
            <PageTable
                columns={[
                    {
                        title: "公司名称",
                        render: () => <div>中国钢铁</div>
                    },
                    {
                        title: "公司地址",
                        render: () => <div>重庆市巴南区</div>
                    },
                    {
                        title: "状态",
                        render: () => <div>正常</div>
                    },
                    {
                        title: "公司人数",
                        render: () => <div>50</div>
                    },
                    {
                        title: "创建时间",
                        render: () => <div>2017-11-11</div>
                    },
                    {
                        width: 150,
                        title: "操作",
                        render: () => (
                            <>
                                <Button type="link" size="small" >
                                    禁用
                                </Button>
                                <Button type="link" size="small" >
                                    删除
                                </Button>
                            </>
                        )
                    },

                ]}
                func={async (pageNo, pageSize) => {
                    return { total: 20, data: [1, 2, 3, 4, 5] }
                }}
            />
            <Drawer width={400} title="添加公司" onClose={setVisible} visible={visible}>
                <Form labelCol={{ span: 4 }} wrapperCol={{ offset: 2 }} >
                    <FormItem label="公司名称" rules={[{ required: true }]} >
                        <Input placeholder="输入公司名称" maxLength={6} />
                    </FormItem>
                    <FormItem label="公司地址" rules={[{ required: true }]}>
                        <Input placeholder="输入公司地址" maxLength={11} />
                    </FormItem>
                    <FormItem label="状态" >
                        <Select defaultValue="1" >
                            <Select.Option value="1" >正常</Select.Option>
                            <Select.Option value="0" >禁用</Select.Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style={{ width: "100%" }} >添加</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </ContentWrapper>
    );
}

const CompanyManagePage: IPageInterface<ICompanyManageProps> = {
    title: "公司管理",
    path: "/company/manage",
    // group: "公司管理",
    component: CompanyManage
}

export default CompanyManagePage;